import {
  Image,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Pressable,
} from 'react-native';
import React, {useState, useEffect, useMemo} from 'react';
import {Switch, Icon, Text as PaperText} from 'react-native-paper';
import BaseDialog from 'components/BaseDialog';
import AppCache from 'utils/cache';
import {SvgXml} from 'react-native-svg';
import Clear from 'assets/Images/clear.svg';
import Avatar from 'assets/Images/avatar.svg';
import useDimensions from 'hooks/useDimensions';
import {getUserInfo} from 'api/login';
interface SystemList {
  label: string;
  value?: string | boolean;
  children?: React.ReactNode;
}
interface defineProps {
  label?: String;
  handlePress: () => void;
}
const Tag = (props: defineProps) => {
  const Scale = useDimensions();
  return (
    <TouchableOpacity
      onPress={props.handlePress}
      style={{
        backgroundColor: 'transparent',
        borderColor: '#0A59F7',
        borderWidth: 1,
        width: 56 * Scale,
        height: 26 * Scale,
        borderRadius: 4,
      }}>
      <Text
        style={{fontSize: 16 * Scale, color: '#0A59F7', textAlign: 'center'}}>
        {props.label ?? '修改'}
      </Text>
    </TouchableOpacity>
  );
};
const handlePress = () => {};

const System = () => {
  const Scale = useDimensions();
  const [value, SetValue] = useState(false),
    [cache, setCache] = useState(''),
    [visible, setVisible] = useState(false);
  const [userInfo, SetUserInfo] = useState<Api.resBody['用户管理_1']>();
  const styles = useMemo(() => {
    return StyleSheet.create({
      avatar: {
        width: 100 * Scale,
        height: 100 * Scale,
        borderRadius: 12 * Scale,
        backgroundColor: 'black',
        marginTop: 100 * Scale,
      },
      systemInfo: {
        width: 880 * Scale,
        backgroundColor: '#fff',
        borderRadius: 16,
        marginTop: 40 * Scale,
      },
      row: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        height: 56 * Scale,
      },
      colText: {
        fontSize: 20 * Scale,
        lineHeight: 56 * Scale,
        fontWeight: '500',
        color: 'rgba(0,0,0,0.8)',
      },
    });
  }, []);
  useEffect(() => {
    getUserInfo().then(data => {
      SetUserInfo(data);
    });
    getAllCache();
  }, []);
  const clearCache = () => {
      setVisible(true);
    },
    getAllCache = () => {
      AppCache.getAllCache().then((data: number) => {
        setCache(Number(data / 1024).toFixed(2));
      });
    };
  const onSubmit = () => {
    AppCache.clearAllCache().then(() => {
      getAllCache();
      setVisible(false);
    });
  };
  const SystemList: SystemList[] = [
    {
      label: '用户账号',
      children: (
        <View style={{flexDirection: 'row', alignItems: 'center'}}>
          <Tag handlePress={handlePress} />
          <Text
            style={[
              styles.colText,
              {
                marginLeft: 12 * Scale,
              },
            ]}>
            {userInfo?.realName}
          </Text>
        </View>
      ),
    },
    {
      label: '所属机构',
      value: userInfo?.deptName,
    },
    {
      label: '通知与提醒',
      value: true,
      children: (
        <Switch
          color="#0A59F7"
          value={value}
          onValueChange={e => {
            SetValue(e);
          }}
        />
      ),
    },
    {
      label: '账号安全',
      children: (
        <View style={{flexDirection: 'row', alignItems: 'center'}}>
          <Tag handlePress={handlePress} />
          <Text
            style={[
              styles.colText,
              {
                marginLeft: 12 * Scale,
              },
            ]}>
            xxxxxxxx
          </Text>
        </View>
      ),
    },
    {
      label: '更新日期',
      value: '2023.12.01',
    },
    {
      label: '缓存',
      children: (
        <Pressable
          style={{
            flexDirection: 'row',
            alignItems: 'center',
          }}
          onPress={clearCache}>
          <SvgXml {...{width: 24 * Scale, height: 24 * Scale}} xml={Clear} />
          <Text style={[styles.colText, {marginLeft: 10 * Scale}]}>
            {cache}KB
          </Text>
        </Pressable>
      ),
    },
    {
      label: '检查版本',
      children: (
        <Pressable
          style={{
            flexDirection: 'row',
            alignItems: 'center',
          }}>
          <Icon size={24 * Scale} source="cached" />
          <Text style={[styles.colText, {marginLeft: 10 * Scale}]}>
            当前版本v1.0.0
          </Text>
        </Pressable>
      ),
    },
  ];
  return (
    <>
      <View
        style={{
          alignItems: 'center',
        }}>
        {userInfo?.headUrl ? (
          <Image style={styles.avatar} source={{uri: userInfo?.headUrl}} />
        ) : (
          <SvgXml
            xml={Avatar}
            width={styles.avatar.width}
            style={{
              ...styles.avatar,
            }}
            height={styles.avatar.height}></SvgXml>
        )}
        <View style={styles.systemInfo}>
          <View
            style={{
              paddingLeft: 24 * Scale,
              paddingRight: 24 * Scale,
              paddingTop: 8 * Scale,
              paddingBottom: 8 * Scale,
            }}>
            {SystemList.map(item => {
              return (
                <View style={styles.row} key={item.label}>
                  <Text
                    style={{
                      fontSize: 20 * Scale,
                      lineHeight: 56 * Scale,
                      color: 'rgba(0,0,0,0.8)',
                    }}>
                    {item.label}
                  </Text>
                  {item.children || (
                    <Text style={styles.colText}>{item.value}</Text>
                  )}
                </View>
              );
            })}
          </View>
        </View>
      </View>
      <BaseDialog
        visible={visible}
        setVisible={setVisible}
        onSubmit={onSubmit}
        title="提示"
        style={{
          width: '50%',
          alignSelf: 'center',
        }}>
        <PaperText variant="titleMedium">确认是否删除？</PaperText>
      </BaseDialog>
    </>
  );
};

export default System;
